<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>

    <div id="page" class="">
            <div class="container">
                <div id="pageContent">
                    <section>
                        <header>
                            <h3>基本类型</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="panel">
                                    <div class="panel-body" contenteditable="">默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>带标题的面板</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="panel">
                                    <div class="panel-heading" contenteditable="">面板标题</div>
                                    <div class="panel-body" contenteditable="">面板内容</div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>带脚注的面板</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="panel">
                                    <div class="panel-body" contenteditable="">面板内容</div>
                                    <div class="panel-footer" contenteditable="">面板脚注</div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>色彩主题</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="panel panel-primary">
                                    <div class="panel-heading" contenteditable="">.panel-primary</div>
                                    <div class="panel-body" contenteditable="">面板内容</div>
                                </div>
                                <div class="panel panel-success">
                                    <div class="panel-body" contenteditable="">面板内容</div>
                                </div>
                                <div class="panel panel-warning">
                                    <div class="panel-body" contenteditable="">面板内容</div>
                                </div>
                                <div class="panel panel-danger">
                                    <div class="panel-body" contenteditable="">面板内容</div>
                                </div>
                                <div class="panel panel-info">
                                    <div class="panel-body" contenteditable="">面板内容</div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>包含表格</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="panel">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Lorem ipsum.</th>
                                                <th>Repudiandae, harum!</th>
                                                <th>Tenetur, corporis.</th>
                                                <th>Perspiciatis, porro?</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Lorem ipsum.</td>
                                                <td>Officiis, non.</td>
                                                <td>Molestias, qui.</td>
                                                <td>Odit, ducimus.</td>
                                            </tr>
                                            <tr>
                                                <td>Lorem ipsum.</td>
                                                <td>Repellendus, exercitationem!</td>
                                                <td>Velit, eos.</td>
                                                <td>Eius, officiis.</td>
                                            </tr>
                                            <tr>
                                                <td>Lorem ipsum.</td>
                                                <td>Amet, esse!</td>
                                                <td>Quis, pariatur!</td>
                                                <td>Totam, quae.</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </article>
                    </section>



                    <section>
                        <header>
                            <h3>包含列表</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="panel">
                                    <div class="panel-heading">项目</div>
                                    <ul class="list-group">
                                        <li class="list-group-item">待办</li>
                                        <li class="list-group-item">需求</li>
                                        <li class="list-group-item">任务</li>
                                        <li class="list-group-item">Bug</li>
                                        <li class="list-group-item">用例</li>
                                    </ul>
                                </div>
                            </div>
                           
                        </article>
                    </section>


                    <section>
                        <header>
                            <h3>面板组</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="panel-group">
                                    <div class="panel">
                                        <div class="panel-heading">面板标题</div>
                                        <div class="panel-body">面板内容</div>
                                        <div class="panel-footer">面板脚注</div>
                                    </div>
                                    <div class="panel">
                                        <div class="panel-heading">面板标题</div>
                                        <div class="panel-body">面板内容</div>
                                        <div class="panel-footer">面板脚注</div>
                                    </div>
                                    <div class="panel">
                                        <div class="panel-heading">面板标题</div>
                                        <div class="panel-body">面板内容</div>
                                        <div class="panel-footer">面板脚注</div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </section>
                </div>
                <nav></nav>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
</body>

</html>